<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<title>tio-im:支持百万在线用户</title>
<style type="text/css" media="screen">
		*{margin:0;padding:0;}
		#wrap{margin:10px auto; width:80%; height:99%;}
		.unit{margin-bottom:5px; padding:5px; border:solid 1px #000; height:auto;  clear:both;box-sizing:border-box;}	
		.unit label{text-align:right;width:100px;line-height: 30px; display:inline-block;}
		.unit input{line-height: 30px; width:100px; height:30px;}
		.log {font-size:11px; font-family:Courier; overflow: auto; height:100%; background:black;width:85%;float:left}
		.log p{padding:2px;margin:0;}
		.content{width:100%;overflow:hidden;height:80%;margin:0 0 5px 0;}
		.online{width: 15%;height: 100%;float:right;background: #FCFCFC;border:solid 1px #000;box-sizing:border-box;}
</style>
<script type="text/javascript" src="./static/js/date.js"></script>
</head>
<script>
var socket ;
var logDiv;
function connect(){
	var ip = document.getElementById("serverIp").value;
	var port = document.getElementById("port").value;
	var username = document.getElementById("username").value;
	var password = document.getElementById("password").value;
	logDiv = document.getElementById('logs');
	socket = new WebSocket("ws:"+ip+":"+port+"?username="+username+"&passowrd="+password);
	socket.onopen = function(e){
		logDiv.innerHTML+="<font color='green' size='2'>登录成功...</font><br>";
		scrollToBottom();
	};
	socket.onerror = function(e){
		logDiv.innerHTML+="<font color='red' size='2'>异常:"+e+"</font><br>";
		scrollToBottom();
	};
	socket.onclose = function(e){
		logDiv.innerHTML+="<font color='green' size='2'>退出登录...</font><br>";
		 scrollToBottom();
	};
	socket.onmessage = function(e){
	   var data = e.data;
	   var dataObj = eval("("+data+")");//转换为json对象
	   if(!dataObj.errorCode && dataObj.errorCode != 0){
	    	var createTime = new Date(dataObj.createTime).Format("yyyy/MM/dd HH:mm:ss");
	 	    var from = dataObj.from;
	 	    var content = dataObj.content;
	    	//处理数据
		    logDiv.innerHTML+="<font color='#009ACD' size='2'>"+from+" "+createTime+"</font><br>";
		    //处理数据
		    logDiv.innerHTML+="<font color='#FFFFFF' size='1'>&nbsp;"+content+"</font><br>";
	    }else{
	    	 //处理数据
		    logDiv.innerHTML+="<font color='green' size='2'>"+data+"</font><br>";
	    }
	    scrollToBottom();
	};
}
function disConnect(){
	socket.close(); 
}
function send(){
	var content = document.getElementById('content').value;
	socket.send(content);
}
function scrollToBottom(){
	var logDiv = document.getElementById('logs');
	logDiv.scrollTop = logDiv.scrollHeight;
}
function clearLogs(){
	var logDiv = document.getElementById('logs');
	logDiv.innerHTML="";
}
function showServerConfig(obj){
 	var target = document.getElementById("serverConfigId");
 	if (target.style.display=="block"){
        target.style.display="none";
        obj.value="服务器配置";
    } else {
        target.style.display="block";
        obj.value='关闭配置';
    }
}
</script>
<body>
   <div id="wrap" style="height:600px;">
		<div class="unit">
			<label >用户名:</label>
			<input  id="username" value="admin"/>
			<label style="width: 60px;">密码:</label>
			<input  id="password" value ="123"/>
			<input onclick="javascript:connect();"  type="button" value="登录" />
			<input onclick="javascript:disConnect();" type="button" value="退出" />
			<input onclick="javascript:showServerConfig(this);" type="button" value="服务器配置" />
		</div>
		<div class="unit" id="serverConfigId" style="display: none;">
			<label >服务器IP:</label>
			<input  id="serverIp" value="localhost"/>
			<label>端口号:</label>
			<input  id="port" value ="8888"/>
		</div>
		<div class="unit">
			<label>聊天记录:</label>
			<input type="button" value="清空记录" onclick="clearLogs();"/>
		</div>
		<div class="content">
				<div id="logs" class="unit log">
				</div>
				<div id="onlinePanel" class="online">
					&nbsp;在线成员(0/0)
				</div>
		
		</div>
				<div class="unit">
			<label>输入内容:</label>
			<input id="content" style="width:500px;"/>
			<input onclick="javascript:send()"  type="button" value="发送" />
		</div>
   </div>
</body>
</html>